{% extends "base.html" %}

{% block title %}AI智能分析 - SurveyAnalyzer{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ url_for('main.index') }}">
                <i class="fas fa-home me-1"></i>
                首页
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-brain me-1"></i>
            AI智能分析
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<!-- AI智能助手 -->
<div class="row">
    <div class="col-12">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-robot me-2"></i>
                    AI智能分析助手
                </h5>
                <small>与AI助手对话，获取专业的数据分析建议和洞察</small>
            </div>
            <div class="card-body d-flex flex-column" style="height: 70vh;">
                <!-- 聊天消息区域 -->
                <div id="chatMessages" class="flex-grow-1 mb-3" style="overflow-y: auto; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1.5rem; background-color: #f8f9fa;">
                    <div class="chat-message ai-message">
                        <div class="message-content">
                            <i class="fas fa-robot me-2 text-primary"></i>
                            <strong>AI助手：</strong>您好！我是您的专属数据分析助手。我可以帮您：
                            <ul class="mt-2 mb-0">
                                <li>解答数据分析相关问题</li>
                                <li>提供专业的分析建议</li>
                                <li>解释统计概念和方法</li>
                                <li>协助制定分析策略</li>
                            </ul>
                            请告诉我您想了解什么？
                        </div>
                        <div class="message-time">刚刚</div>
                    </div>
                </div>
                
                <!-- 输入区域 -->
                <div class="input-group">
                    <input type="text" class="form-control form-control-lg" id="chatInput" placeholder="请输入您的问题，例如：如何进行相关性分析？" onkeypress="handleChatKeyPress(event)">
                    <button class="btn btn-primary btn-lg" onclick="sendChatMessage()" id="sendBtn">
                        <i class="fas fa-paper-plane me-1"></i>
                        发送
                    </button>
                </div>
                
                <!-- 快捷问题 -->
                <div class="mt-3">
                    <small class="text-muted">快捷问题：</small>
                    <div class="mt-1">
                        <button class="btn btn-outline-secondary btn-sm me-2 mb-1" onclick="askQuickQuestion('如何进行数据清洗？')">
                            数据清洗
                        </button>
                        <button class="btn btn-outline-secondary btn-sm me-2 mb-1" onclick="askQuickQuestion('什么是相关性分析？')">
                            相关性分析
                        </button>
                        <button class="btn btn-outline-secondary btn-sm me-2 mb-1" onclick="askQuickQuestion('如何选择合适的图表类型？')">
                            图表选择
                        </button>
                        <button class="btn btn-outline-secondary btn-sm me-2 mb-1" onclick="askQuickQuestion('如何解读统计结果？')">
                            结果解读
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.chat-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 1rem;
    max-width: 85%;
    position: relative;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem 1rem 1rem 0.2rem;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.user-message {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 1rem 1rem 0.2rem 1rem;
    margin-left: auto;
    text-align: right;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.message-content {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.message-content ul {
    margin: 0.5rem 0;
    padding-left: 1.2rem;
}

.message-content li {
    margin-bottom: 0.3rem;
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.8;
    font-weight: 300;
}

.ai-message .message-time {
    text-align: left;
}

.user-message .message-time {
    text-align: right;
}

#chatMessages {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border: none !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}

#chatMessages::-webkit-scrollbar {
    width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
}

.btn-outline-secondary:hover {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

#sendBtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;
}

#sendBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

#chatInput {
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

#chatInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}


</style>

<script>
let currentData = null;
let analysisResults = null;
const filename = '{{ filename }}';

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('AI分析页面已加载，当前文件:', filename);
});

function askQuickQuestion(question) {
    document.getElementById('chatInput').value = question;
    sendChatMessage();
}

function sendChatMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    
    if (!message) return;
    
    // 添加用户消息
    addChatMessage(message, 'user');
    input.value = '';
    
    // 发送到AI助手
    fetch('/api/ai_chat', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            message: message,
            filename: filename
        })
    })
    .then(response => response.json())
    .then(data => {
        addChatMessage(data.response || '抱歉，我现在无法回答这个问题。', 'ai');
    })
    .catch(error => {
        addChatMessage('抱歉，发生了错误，请稍后再试。', 'ai');
    });
}

function addChatMessage(message, sender) {
    const chatMessages = document.getElementById('chatMessages');
    const messageDiv = document.createElement('div');
    messageDiv.className = `chat-message ${sender}-message`;
    
    const icon = sender === 'user' ? 'fas fa-user' : 'fas fa-robot';
    const time = new Date().toLocaleTimeString();
    
    messageDiv.innerHTML = `
        <div class="message-content">
            <i class="${icon} me-2"></i>
            ${message}
        </div>
        <div class="message-time">${time}</div>
    `;
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function handleChatKeyPress(event) {
    if (event.key === 'Enter') {
        sendChatMessage();
    }
}


</script>
{% endblock %}